import EvaluationRecord from '@/components/EvaluationRecord';
import GuidanceRecord from '@/components/GuidanceRecord';
import HealthRecords from '@/components/HealthRecords';
import PhysiologicalMonitoring from '@/components/PhysiologicalMonitoring';
import TrainingRecord from '@/components/TrainingRecord';
import { get_platform_guidance_info, platform_guidance_patients } from '@/services/guide';
import { get_patient_info } from '@/services/patient';
import age from '@/utils/age';
import { ProDescriptions } from '@ant-design/pro-components';
import { Card, Divider, Modal, Spin, Tabs } from 'antd';
import { useEffect, useState } from 'react';

interface Iprops {
  isShowRemoteModal: (show: boolean) => void;
  remoteModal: boolean;
  remoteId: number | undefined;
  //   actionRef: React.MutableRefObject<ActionType | undefined>;
}
type Info = {
  family_address: string;
  area_name: string;
  city_name: string;
  province_name: string;
  birth: string;
  id: number;
  phone: string;
  name: string;
  sex: number;
  id_card: string;
  address: string;
  info: any;
};
const RemoteDetails = (props: Iprops) => {
  const { remoteModal, isShowRemoteModal, remoteId } = props;
  // 存储指导记录详情
  const [remoteInfo, setRemoteInfo] = useState<Info | undefined>(undefined);
  // 存储指导患者列表
  const [guidePatient, setGuidePatient] = useState<any>(undefined);
  // 存储患者详情
  const [patientinfo, setPatientInfo] = useState<Info | undefined>(undefined);
  // 存储患者id
  const [patientId, setPatientId] = useState<number>();
  useEffect(() => {
    //   页面初始化获取指导信息
    const getData = async () => {
      if (remoteId) {
        let res: any = await get_platform_guidance_info({ id: remoteId });
        console.log('远程指导详情', res);
        if (res.code == 200) {
          setRemoteInfo(res.data);
        }
      }
    };
    // 获取指导患者列表
    const get_patient_list = async () => {
      if (remoteId) {
        let res: any = await platform_guidance_patients({ id: remoteId });
        console.log('指导患者列表', res);
        if (res.code == 200) {
          setGuidePatient(res.data);
          // 获取患者详情
          let params: any = await get_patient_info({ id: res.data[0].patient_id });
          console.log('params', params);
          setPatientInfo(params.data);
          setPatientId(params.data.id);
        }
      }
    };
    getData();
    get_patient_list();
  }, []);
  // 切换患者用户
  const onChange = async (activeKey: string) => {
    console.log('gggg', activeKey);
    let params: any = await get_patient_info({ id: activeKey });
    if (params.code == 200) {
      setPatientInfo(params.data);
      setPatientId(params.data.id);
    }
  };
  return (
    <Modal
      title="详情"
      open={remoteModal}
      onCancel={() => isShowRemoteModal(false)}
      width={1300}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      {remoteInfo === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <Card>
          <ProDescriptions
            dataSource={remoteInfo}
            columns={[
              {
                title: '机构名称',
                key: 'platform_name',
                dataIndex: 'platform_name',
              },
              {
                title: '预约账号',
                key: 'platform_phone',
                dataIndex: 'platform_phone',
              },
              {
                title: '计划指导时间',
                key: 'plan_time',
                dataIndex: 'plan_time',
              },
              {
                title: '备注',
                key: 'remark',
                dataIndex: 'remark',
              },
            ]}
          ></ProDescriptions>
        </Card>
      )}
      {/* <Divider /> */}
      {guidePatient === undefined && patientinfo === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <Tabs
          style={{ marginTop: '10px', minHeight: '700px' }}
          type="card"
          tabPosition="left"
          onChange={onChange}
          items={guidePatient.map((item: any, index: number) => {
            return {
              label: (
                <div key={index}>
                  <img
                    style={{ width: '30px', height: '30px', borderRadius: '50%' }}
                    src={item.patient_headimg ? item.patient_headimg : '/head_img.svg'}
                    alt=""
                  />
                  <span style={{ marginLeft: '20px' }}>{item.patient_name}</span>
                </div>
              ),
              key: item.patient_id,
              children: (
                <>
                  <ProDescriptions
                    dataSource={patientinfo}
                    columns={[
                      {
                        title: '手机号',
                        key: 'phone',
                        dataIndex: 'phone',
                      },
                      {
                        title: '姓名',
                        key: 'username',
                        dataIndex: 'username',
                      },
                      {
                        title: '性别',
                        key: 'sex',
                        dataIndex: 'sex',
                        valueType: 'select',
                        valueEnum: {
                          0: {
                            text: '未知',
                          },
                          1: {
                            text: '男',
                          },
                          2: {
                            text: '女',
                          },
                        },
                      },
                      {
                        title: '身份证号',
                        key: 'id_card',
                        dataIndex: 'id_card',
                      },
                      {
                        title: '年龄',
                        key: 'age',
                        dataIndex: 'age',
                        render: (_, record) => age(record.birth),
                      },
                      {
                        title: '家庭地址',
                        key: 'address',
                        dataIndex: 'address',
                        render: (_, record) => {
                          return (
                            record.province_name +
                            record.city_name +
                            record.area_name +
                            record.family_address
                          );
                        },
                      },
                    ]}
                  ></ProDescriptions>
                  <Tabs
                    defaultActiveKey="生理监测"
                    items={[
                      {
                        key: '生理监测',
                        label: '生理监测',
                        children: (
                          <PhysiologicalMonitoring patientId={patientId}></PhysiologicalMonitoring>
                        ),
                      },
                      {
                        key: '评估记录',
                        label: '评估记录',
                        children: (
                          <EvaluationRecord type={false} patientId={patientId}></EvaluationRecord>
                        ),
                      },
                      {
                        key: '训练记录',
                        label: '训练记录',
                        children: <TrainingRecord patientId={patientId}></TrainingRecord>,
                      },
                      {
                        key: '指导记录',
                        label: '指导记录',
                        children: <GuidanceRecord patientId={patientId}></GuidanceRecord>,
                      },
                      {
                        key: '健康档案',
                        label: '健康档案',
                        children: <HealthRecords info={patientinfo?.info}></HealthRecords>,
                      },
                    ]}
                  />
                </>
              ),
            };
          })}
        />
      )}
    </Modal>
  );
};
export default RemoteDetails;
